<template>
  <el-container class="main_con">
    <div class="filter_con ds_block nopt">
      <div class="filter_area">
        <!-- <el-input class="serach_input mr_15 mt_15" v-model="obj.user_name" placeholder="用户名"></el-input> -->
        <label class="mr_15 mt_15">类型</label>
        <el-select size="medium" v-model="obj.type" placeholder="请选择" class="mr_15 mt_15">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker>
        <el-button size="medium" class="mr_15 mt_15" @click="searchList">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table :data="list" element-loading-text fit highlight-current-row>
        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
        <!-- <el-table-column type="index" label="序号"></el-table-column> -->
        <el-table-column prop="user_name" label="用户">
          <template slot-scope="scope">
            <div class="user" v-if="scope.row.user">
              <div class="face">
                <vimage
                  :src="scope.row.user.picurl"
                  style="width:50px;height:50px;display:block;border-radius:50%;"
               ></vimage
>
              </div>
              <div class="info">
                <div class="name" :title="scope.row.user.nickname">{{scope.row.user.nickname}}</div>
                <div class="source">
                  <i class="weixin el-sc-weixin4"></i>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop label="余额变化">
          <template slot-scope="scope">
            <span class="add" v-if="scope.row.type == 0">+{{ scope.row.money }}</span>
            <span class="reduce" v-if="scope.row.type == 1">-{{ scope.row.money }}</span>
            <span v-if="scope.row.type == 2">变更为{{ scope.row.money }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="service_charge" label="手续费"></el-table-column> -->
        <el-table-column prop="new_cash" label="当前余额"></el-table-column>
        <el-table-column prop="source" label="备注"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
      </el-table>
      <div class="table_footer" v-show="total != 0">
        <el-pagination
          @current-change="changePage"
          :current-page="page"
          class="pages"
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import DatePicker from "@/components/DatePicker/index";
import { getRecordList, delUserCash, editUserCash } from "@/api/mall/finance";
export default {
  data() {
    return {
      options: [
        {
          value: -1,
          label: "全部"
        },
        {
          value: 0,
          label: "增加"
        },
        {
          value: 1,
          label: "减少"
        },
        {
          value: 2,
          label: "变更"
        }
      ],

      obj: {
        //user_id: '',
        //user_name:'',
        type: -1,
        begin_date: "",
        end_date: ""
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      list: [],
      listSelected: []
    };
  },
  components: {
    DatePicker
  },
  mounted() {
    this.searchList();
  },
  methods: {
    //选择记录
    selectItem(selection) {
      this.listSelected = selection;
    },
    //搜索数据
    searchList() {
      this.objTemp = Object.assign({}, this.obj);
      //处理过滤status字段
      if (this.objTemp.type == -1) {
        delete this.objTemp.type;
      }
      this.page = 1
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      getRecordList(this.objTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    //更新单条记录
    editItem(item) {},
    //删除单条记录
    delItem(user_id) {
      this.$confirm("是否确认删除该记录?").then(_ => {
        this.isLoading = true;
        delUserCash(user_id).then(res => {
          this.isLoading = false;
          this.getDataList();
        });
      });
    },
    //批量删除
    delMul() {
      this.$alert("功能暂未开发!");
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  color: #ff1f2c;
  font-weight: bold;
}
.reduce {
  color: #19be6b;
  font-weight: bold;
}
.user {
  display: flex;

  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .name {
      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: "ellipsis"; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }

    .source {
      .weixin {
        font-size: 18px;
        color: #333;
      }
    }
  }
}
</style>
